<template>
  <el-dialog :model-value="visible" width="800px" center align-center destroy-on-close @close="onClose">
    <question-content :question="formModel" />
    <template #footer>
      <el-button @click="onClose()">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import { onMounted, reactive, ref } from 'vue'
  import { questionApi } from '@/api/question.js'
  import QuestionContent from './Content.vue'
  const props = defineProps({
    questionId: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  })
  const visible = ref(props.visible)

  const formModel = reactive({})

  onMounted(async () => {
    const res = await questionApi.questionView({ id: props.questionId })
    Object.assign(formModel, res)
    if (formModel.questionType === 2) {
      // 多选题答案处理
      formModel.questionAnswer2 = formModel.questionAnswer.split('|')
    }
    if (formModel.questionType === 4) {
      // 填空题答案处理
      formModel.questionAnswer4 = formModel.questionAnswer.split('|')
    }
  })

  const emit = defineEmits(['close'])
  const onClose = () => {
    emit('close')
  }
</script>
